<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

<script>
    $(function () {
        var arrayData = [
        [1, 'Exxon Mobil', 339938.0, 36130.0],
        [2, 'Wal-Mart Stores', 315654.0, 11231.0],
        [3, 'Royal Dutch Shell', 306731.0, 25311.0],
        [4, 'BP', 267600.0, 22341.0],
        [5, 'General Motors', 192604.0, -10567.0],
        [6, 'Chevron', 189481.0, 14099.0],
        [7, 'DaimlerChrysler', 186106.3, 3536.3],
        [8, 'Toyota Motor', 185805.0, 12119.6],
        [9, 'Ford Motor', 177210.0, 2024.0],
        [10, 'ConocoPhillips', 166683.0, 13529.0],
        [11, 'General Electric', 157153.0, 16353.0],
        [12, 'Total', 152360.7, 15250.0],
        [13, 'ING Group', 138235.3, 8958.9],
        [14, 'Citigroup', 131045.0, 24589.0],
        [15, 'AXA', 129839.2, 5186.5],
        [16, 'Allianz', 121406.0, 5442.4],
        [17, 'Volkswagen', 118376.6, 1391.7],
        [18, 'Fortis', 112351.4, 4896.3],
        [19, 'Crédit Agricole', 110764.6, 7434.3],
        [20, 'American Intl. Group', 108905.0, 10477.0]
    ];
        //calculate sum of 3rd and 4th column.
        var totalData,
            averageData;
        function calculateSummary() {
            var revenueTotal = 0,
                profitTotal = 0,
                data = $("#grid_summary").pqGrid('option', 'dataModel.data');
            for (var i = 0; i < data.length; i++) {
                var row = data[i];
                revenueTotal += parseFloat(row[2]);
                profitTotal += parseFloat(row[3]);
            }

            var revenueAverage = $.paramquery.formatCurrency(revenueTotal / arrayData.length);
            var profitAverage = $.paramquery.formatCurrency(profitTotal / arrayData.length);

            revenueTotal = $.paramquery.formatCurrency(revenueTotal);
            profitTotal = $.paramquery.formatCurrency(profitTotal);

            totalData = ["<b>Total: </b>", "", revenueTotal, profitTotal];
            averageData = ["<b>Average: </b>", "", revenueAverage, profitAverage];
        }
        var obj = { 
            width: 600, 
            height: 400,
            title: "Summary of rows",
            //virtualX: true,
            //virtualY: true,
            resizable: true,
            freezeCols: 1
        };
        obj.colModel = [
            { title: "Rank", align: "right", dataType: "integer", width: 100 },
            { title: "Company", width: 250 },
            { title: "Revenues ($ millions)", align: "right", dataType: "float", width: 180,
                validations: [{type:'nonEmpty', msg:'Required'}]
            },
            { title: "Profits ($ millions)", align: "right", dataType: "float", width: 180, minWidth: 160,
                validations: [{ type: 'nonEmpty'}]
            }
        ];
        obj.dataModel = {
            data: arrayData
        };
        var $summary = "";
        obj.render = function (evt, ui) {
            $summary = $("<div class='pq-grid-summary'  ></div>")
                .prependTo($(".pq-grid-bottom", this));
        }
        //refresh summary whenever data changes due to edit, add, paste, undo, redo etc.
        obj.change = function (evt, ui) {            
            obj.refresh.call(this);
        }
        obj.refresh = function (evt, ui) {
            calculateSummary();
            var data = [totalData, averageData]; //2 dimensional array
            var obj = { data: data, $cont: $summary }
            $(this).pqGrid("createTable", obj);
        }
        var $grid = $("#grid_summary").pqGrid(obj);
    });
        
</script>    
</head>
<body>
Any number of rows can be frozen in ParamQuery grid. 
In the below example 2 rows are frozen at the bottom to display the summary of rows. 
Summary is refreshed whenever a cell value changes with inline editing or copy/paste.
<div id="grid_summary" style="margin:auto;"></div>

</body>

</html>
